<template>
  <div class="chart-container app-container nohead">
    <el-alert
      title="免责声明：Highcharts组件不属于JSBOS产品，只用于介绍第三方组件如何在《智慧云学院》中使用。如果对这些组件感兴趣，请使用正版。"
      type="warning"
      :closable="false"
      class="mb-10"
    />
    <highcharts
      :options="chartOptions"
      :callback="myCallback"
      style="height: 530px; margin-top: 30px"
    ></highcharts>
  </div>
</template>

<script>
import { Chart } from "highcharts-vue";
export default {
  name: "extend-graphDemo-highchartsLine",
  components: {
    highcharts: Chart,
  },
  data() {
    return {
      chartOptions: {
        title: {
          text: "2010 ~ 2016 年太阳能行业就业人员发展情况",
        },
        subtitle: {
          text: "数据来源：thesolarfoundation.com",
        },
        yAxis: {
          title: {
            text: "就业人数",
          },
        },
        legend: {
          layout: "vertical",
          align: "right",
          verticalAlign: "middle",
        },
        plotOptions: {
          series: {
            label: {
              connectorAllowed: false,
            },
            pointStart: 2010,
          },
        },
        series: [
          {
            name: "安装，实施人员",
            data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
          },
          {
            name: "工人",
            data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
          },
          {
            name: "销售",
            data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
          },
          {
            name: "项目开发",
            data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
          },
          {
            name: "其他",
            data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
          },
        ],
        responsive: {
          rules: [
            {
              condition: {
                maxWidth: 500,
              },
              chartOptions: {
                legend: {
                  layout: "horizontal",
                  align: "center",
                  verticalAlign: "bottom",
                },
              },
            },
          ],
        },
      },
    };
  },
  mounted() {},

  methods: {
    myCallback() {
      console.log("this is callback function");
    },
  },
};
</script>
